<template>
  <div class="query">
    <div>
      <RadioGroup v-model:value="queryParams.showWitch" button-style="solid">
        <RadioButton value="group">分组</RadioButton>
        <RadioButton value="list">列表</RadioButton>
      </RadioGroup>
    </div>
    <div>
      <InputSearch
        v-model:value="queryParams.search"
        placeholder="名称/编码/IP/标签"
        style="width: 260px"
        @search="onSearch"
      />
    </div>
  </div>

  <div class="list_container">
    <div class="group" :style="groupStyle">
      <div class="group_container" v-if="queryParams.showWitch === 'group'">
        <Tree
          :tree-data="groupOptions"
          defaultExpandAll
          v-model:selectedKeys="_selectedKeys"
          :fieldNames="{
            children: 'children',
            title: 'groupName',
            key: 'groupId',
          }"
        >
        </Tree>
      </div>
    </div>
    <div class="list">
      <CheckboxGroup v-model:value="_checkList">
        <div v-for="item in 10" class="list_item" :key="item">
          <Row class="list_Row">
            <Col :span="3">
              <Checkbox :value="item" />
            </Col>
            <Col :span="7">
              <div class="unified">数据库1234d</div>
            </Col>
            <Col :span="7">
              <div class="unified">101.43.172.43</div>
            </Col>
            <Col :span="7">
              <div class="label unified">
                <Tag color="#810000" class="tag">sftp</Tag>
                <Tag color="#165dff" class="tag">ntp</Tag>
                <Tag color="#24d78c" class="tag">sftp</Tag>
              </div>
            </Col>
          </Row>
        </div>
      </CheckboxGroup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import {
  Checkbox,
  CheckboxGroup,
  Col,
  InputSearch,
  RadioButton,
  RadioGroup,
  Row,
  Tag,
  Tree,
} from 'ant-design-vue';
import { groupSelectList } from './api';

const _checkList = defineModel('checkList', {
  type: Array,
  default: () => [],
});

const queryParams = ref({
  showWitch: 'group',
  search: '',
});

const groupOptions = ref([]);
const _selectedKeys = ref([]);
const getInfo = async () => {
  const group = await groupSelectList();
  groupOptions.value = group.data;
};
getInfo();
const onSearch = () => {};

const groupStyle = computed(() => {
  return {
    width: queryParams.value.showWitch === 'group' ? '260px' : 0,
    marginRight: queryParams.value.showWitch === 'group' ? '20px' : 0,
  };
});
</script>

<style scoped lang="scss">
.query {
  display: flex;
  justify-content: space-between;
  :deep(.ant-radio-button-wrapper) {
    width: 130px;

    text-align: center;
  }
}
.list_container {
  margin-top: 15px;
  height: calc(100% - 150px);
  display: flex;
  justify-content: space-between;
  .list,
  .group {
    height: 600px;
  }
  .group_container {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 10px 0;
  }
  .list {
    flex: 1;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: auto;
    cursor: pointer;
    :deep(.ant-checkbox-group) {
      display: block;
    }
    &_Row {
      align-items: center;
    }
    .label {
      height: 40px;
      line-height: 40px;
      .tag {
        margin-right: 15px;
      }
    }
  }
  .group {
    transition: all 0.3s;
  }
}
</style>
